<!--
 * @Description: 
 * @Date: 2020-12-18 15:03:42
 * @LastEditors: lother
 * @LastEditTime: 2021-01-09 17:17:19
 * @FilePath: \AccountOpening-H5\src\components\page\k-identCards.vue
-->
<template>
<div>
        <van-field name="uploader" class="cardList noBorder"
            v-model="fileLoad"
            :rules="rulesList">
            <template #input>
                <div class="pors">
                    <van-uploader result-type="file" :after-read="afterRead"  capture :disabled="cardZShow" />
                    <div class="por">
                        <img :src="fileLoad?fileLoad:require('@/assets/img/cardz.png')" alt="">
                    </div>
                    <div class="cardBT">
                        {{list['title_'+langSuff]}}
                    </div>
                    <van-loading :color="color" v-show="cardZShow" />
                </div>
            </template>
        </van-field>
        <div class="errsfz" v-show="!fileLoad?true:false">
            <h2>{{$t('mainlandCard.index.5636kbucmzk0')}}</h2>
            <p>1. {{$t('page.k-identCards.5638zccsyi00')}}</p>
            <p>2.{{$t('mainlandCard.index.5636kngizc80')}}<span>{{$t('mainlandCard.index.5636kbucna00')}}</span></p>
            <p>
                <img src="@/assets/img/errfz_en.png" alt="" v-if="langSuff=='en'">
                <img src="@/assets/img/errfz_tc.png" alt="" v-else-if="langSuff=='tc'">
                <img src="@/assets/img/errsfz.png" alt="" v-else>
            </p>
        </div>
</div>
</template>
<script>
import { fff } from '@/assets/less/global.less'
import { uploads } from '@/api/common'

export default {
    name:"k-identCards",
    props:{
        val:{
            type:String,
            default:""
        },
        list:{
            type:Object,
            default:()=>{}
        }
    },
    computed:{
        color(){
            return fff
        },
        langSuff(){
            return  this.$store.state.langSuff
        },
        rulesList(){
            var arr=[]
            if(this.list?.is_require){
                // arr.push({ required: true, message: '请上传'+this.list['title_'+this.langSuff] })
                arr.push({ validator: this.asyncValidator,message: this.$t('login.index.5638tdeew440')+this.list['title_'+this.langSuff]})
            }
            var rules  = this.list?.rule ?? [];
            for (let index = 0; index < rules.length; index++) {
                const item = rules[index];
                if(item.rule!==''){
                    arr.push({pattern:this.evalreg(item.rule) , message : item['error_tip_'+this.langSuff]})
                }
            }
            return arr
        }
     },
    data() {
        return {
            cardZShow:false,
            fileLoad:'',
        }
    },
    created(){
        this.fileLoad = this.val
    },
    methods:{
         afterRead(item){
            this.cardZShow=true;
            this.uoloadImg(item.file)
            // setTimeout(()=>{
            //     this.cardZShow=false;
            //     this.fileLoad = file.content
            // },1000)
        },
        uoloadImg(file){
            var formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
        　　formData.append('file',file); //接口需要传的参数
            formData.append('marker','1'); //接口需要传的参数
            uploads(formData)
            .then(res=>{
                if(res.code==1){
                    this.cardZShow=false;
                    this.fileLoad = res.data.url;
                    this.$emit('update:val',res.data.url)
                }
            })
            .catch(error=>{
                this.cardZShow=false;
            })
        },
         asyncValidator(val) {
            var bOll;
            if(!this.fileLoad){
                bOll= false
            }else{
                bOll= true
            }
            return bOll
        },
    }
}
</script>
<style lang="less" scoped>
    .cardList{
        .between;
        padding-top: 0.2rem;
        .pors{
            width: 47%;
            margin: 0 auto;
            background: @grey;
            height: 2.8rem;
            padding:0.35rem 0.5rem 0.95rem;
            border-radius: 3px;
            position: relative;
            overflow: hidden;
            >.por{
                width: 100%;
                height: 100%;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
            .cardBT{
                border-radius: 3px;
                background: @btnColor;
                height: 0.6rem;
                text-align: center;
                line-height: 0.6rem;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                color: @fff;
                font-size: 0.26rem;
            }
            .van-loading{
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 2;
                position: absolute;
                top:0;
                left: 0;
                .center;
            }
        }
        // li::after{
        //     content: '';
        //     width: 100%;
        //     height: 100%;
        //     background: rgba(0, 0, 0, 0.5);
        //     z-index: 2;
        //     position: absolute;
        //     top:0;
        //     left: 0;
        //     .center;
        // }

    }
    .errsfz{
        padding:0.9rem 0 0.7rem;
        font-size: 0.26rem;
        line-height: 0.36rem;
        color: @sizeColor;
        h2{
           padding-bottom: 0.2rem;
        }
        p{
            span{
                color: @btnColor;
            }
        }
        img{
            margin-top: 0.35rem;
            width: 100%;
        }
    }
    .errsfz.on{
        display: none;
    }
</style>